<template>
	<view style="width: 100%;height: 100vh;position: relative;">
		<!-- map -->
		<view style="width: 100%;height: 100%;">
			<view class="page-body" style="height: 100%;">
				<view class="page-section page-section-gap" style="height: 100%;">
					<map style="width: 100%; height: 100%;" :enable-3D="true" :enable-building="true" :zIndex="100"
						:enable-satellite="true" :show-scale="true" :latitude="latitude" :longitude="longitude"
						:markers="covers" @markertap="markerHousing " :circles="circle">
					</map>
				</view>
			</view>
		</view>

		<!-- 搜索栏 -->
		<view class="search-nav">
			<view class="uni-list-cell-db" style="width: 23%;height: 100%;">
				<picker @change="bindPickerChange" mode="region">
					<view class="pickAddress">
						<view class="uni-input">{{address}}</view>
						<view style="position: absolute;right: 10rpx;">
							<image src="../../static/down.png" style="width: 45rpx;height: 45rpx;vertical-align: -6px;">
							</image>
						</view>
					</view>
				</picker>
			</view>
			<view style="width: 70%;height: 100%;">
				<u-search placeholder="请输入您心爱房源关键字" :showAction='false' v-model="keyword"></u-search>
			</view>
		</view>

		<uni-popup ref="popup" background-color="#fff" @change="change">
			<view class="popup-content" :class="{ 'popup-height': type === 'left' || type === 'right' }">
				<view style="height: 900rpx;overflow: auto;">
					<view style="width: 94.5%;height: 600rpx;padding: 20rpx;margin-top: 40rpx;"
						v-for="(room,index) in SelectedRooms" :key="index">
						<u-swiper @tap="particulars" height="390rpx" indicatorMode="dot" :indicator="true"
							:list="room.imgList" keyName="imgSrc" circular></u-swiper>

						<view style="width: 100%;padding: 20rpx;line-height: 45rpx;" @tap="particulars">
							<view>{{room.roomTitle}}</view>
							<view>
								<u--text prefixIcon="map" :size='13' iconStyle="font-size: 29rpx"
									:text="room.roomAddress"></u--text>
							</view>
							<view style="width: 100%;display: flex;">
								<view style="margin: 5rpx;" v-for="(item,TableIndex) in room.roomLabel"
									:key="TableIndex">
									<u-tag size='mini' :text="item" plain> </u-tag>
								</view>
							</view>
							<view style="display: flex;height: 50rpx;line-height: 50rpx;">
								<view style="width: 30%; color: #ee4242;">
									￥{{room.roomMoney}}/月
								</view>
								<view style="width: 66%;height: 50rpx; text-align: right;">
									<image style="width: 30rpx;vertical-align: -5rpx;margin-right: 5rpx;"
										src="../../static/日期.png" mode="widthFix"></image>
									<text style="font-size: 27rpx;color: #9e9e9e;">可入住日期{{room.roomDataTime}}</text>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				type: '',
				keyword: '',
				id: 0, // 使用 marker点击事件 需要填写id
				title: 'map',
				latitude: 40.154696,
				longitude: 116.29506001,
				covers: [{
					id: 1,
					latitude: 40.154696,
					longitude: 116.29506001,
					width: 30,
					height: 40,
					// iconPath: '../../static/房子.png'
				}, {
					id: 2,
					latitude: 40.1525,
					longitude: 116.293,
					width: 40,
					height: 40,
					iconPath: '../../static/房子.png'
				}, {
					id: 8,
					latitude: 40.1538,
					longitude: 116.29350,
					width: 40,
					height: 40,
					iconPath: '../../static/房子.png'
				}, {
					id: 3,
					latitude: 40.1530,
					longitude: 116.29750,
					width: 40,
					height: 40,
					iconPath: '../../static/房子.png'
				}, {
					id: 4,
					latitude: 40.1535,
					longitude: 116.29650,
					width: 40,
					height: 40,
					iconPath: '../../static/房子.png'
				}, {
					id: 5,
					latitude: 40.1550,
					longitude: 116.29680,
					width: 40,
					height: 40,
					iconPath: '../../static/房子.png'
				}, {
					id: 6,
					latitude: 40.1568,
					longitude: 116.29450,
					width: 40,
					height: 40,
					iconPath: '../../static/房子.png'
				}, {
					id: 7,
					latitude: 40.1535,
					longitude: 116.29650,
					width: 40,
					height: 40,
					iconPath: '../../static/房子.png'
				}, ],
				circle: [{
					latitude: 40.154696,
					longitude: 116.29506,
					radius: 310,
					fillColor: 'rgba(229, 238, 247,0.4)',
					color: '#bdcffb'
				}],
				address: '北京',
				SelectedRooms: [{
						imgList: [{
								imgSrc: 'https://www.ijuzhong.com/zhuangxiu/uploads/allimg/20200111/1578719044291_4.jpg'
							},
							{
								imgSrc: 'https://img1.baidu.com/it/u=2126214998,1644295934&fm=253&fmt=auto&app=138&f=JPEG?w=667&h=500'
							},
							{
								imgSrc: 'https://img0.baidu.com/it/u=2571859928,2111628958&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=335'
							},
						],
						roomTitle: '合租-昭阳版老房子-找米彩',
						roomAddress: '苏州莫愁路',
						roomLabel: ['长租', '老房子', '近地铁'],
						roomMoney: '1400',
						roomDataTime: '2024/08/10'
					},
					{
						imgList: [{
								imgSrc: 'https://img2.baidu.com/it/u=1795613048,2862580360&fm=253&fmt=auto&app=138&f=JPEG'
							},
							{
								imgSrc: 'https://nimg.ws.126.net/?url=http%3A%2F%2Fdingyue.ws.126.net%2F2021%2F1002%2F9aa2a30bj00r0bx8r001mc000hs00hsm.jpg&thumbnail=660x2147483647&quality=80&type=jpg'
							},
							{
								imgSrc: 'https://img2.baidu.com/it/u=640370081,883809769&fm=253&fmt=auto&app=138&f=JPEG'
							},
						],
						roomTitle: '合租-昭阳版老房子-找米彩',
						roomAddress: '苏州莫愁路',
						roomLabel: ['长租', '老房子', '近地铁'],
						roomMoney: '1400',
						roomDataTime: '2024/08/10'
					},
					{
						imgList: [{
								imgSrc: 'https://www.ijuzhong.com/zhuangxiu/uploads/allimg/20200111/1578719044291_4.jpg'
							},
							{
								imgSrc: 'https://img1.baidu.com/it/u=2126214998,1644295934&fm=253&fmt=auto&app=138&f=JPEG?w=667&h=500'
							},
							{
								imgSrc: 'https://img0.baidu.com/it/u=2571859928,2111628958&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=335'
							},
						],
						roomTitle: '合租-昭阳版老房子-找米彩',
						roomAddress: '苏州莫愁路',
						roomLabel: ['长租', '老房子', '近地铁'],
						roomMoney: '1400',
						roomDataTime: '2024/08/10'
					},
					{
						imgList: [{
								imgSrc: 'https://www.ijuzhong.com/zhuangxiu/uploads/allimg/20200111/1578719044291_4.jpg'
							},
							{
								imgSrc: 'https://img1.baidu.com/it/u=2126214998,1644295934&fm=253&fmt=auto&app=138&f=JPEG?w=667&h=500'
							},
							{
								imgSrc: 'https://img0.baidu.com/it/u=2571859928,2111628958&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=335'
							},
						],
						roomTitle: '合租-昭阳版老房子-找米彩',
						roomAddress: '苏州莫愁路',
						roomLabel: ['长租', '老房子', '近地铁'],
						roomMoney: '1400',
						roomDataTime: '2024/08/10'
					},
					{
						imgList: [{
								imgSrc: 'https://www.ijuzhong.com/zhuangxiu/uploads/allimg/20200111/1578719044291_4.jpg'
							},
							{
								imgSrc: 'https://img1.baidu.com/it/u=2126214998,1644295934&fm=253&fmt=auto&app=138&f=JPEG?w=667&h=500'
							},
							{
								imgSrc: 'https://img0.baidu.com/it/u=2571859928,2111628958&fm=253&fmt=auto&app=138&f=JPEG'
							},
						],
						roomTitle: '合租-昭阳版老房子-找米彩',
						roomAddress: '苏州莫愁路',
						roomLabel: ['长租', '老房子', '近地铁'],
						roomMoney: '1400',
						roomDataTime: '2024/08/10'
					}
				]
			}
		},
		methods: {
			bindPickerChange: function(e) {
				this.address = e.detail.value[2]
			},
			markerHousing(e) {
				if (e.markerId != 1) {
					this.type = 'bottom'
					this.$refs.popup.open('bottom')
				}
			},
			change(e) {
				console.log('当前模式：' + e.type + ',状态：' + e.show);
			},
			particulars() {
				uni.navigateTo({
					url: '/seedComponents/HouseInformation/HouseInformation'
				})
			}

		}
	}
</script>

<style lang="scss" scoped>
	.search-nav {
		width: 100%;
		height: 100rpx;
		position: absolute;
		top: 180rpx;
		z-index: 2;
		display: flex;
		justify-content: space-evenly;

		.pickAddress {
			position: relative;
			width: 140rpx;
			height: 48rpx;
			display: flex;
			background-color: #fff;
			line-height: 48rpx;
			padding: 10rpx 10rpx 10rpx 20rpx;
			border-radius: 40rpx;

			.uni-input {
				width: 76%;
			}
		}
	}

	.bottom_meter {
		width: 480rpx;
		height: 100rpx;
		background-color: #fff;
		margin: 0 auto;
		position: absolute;
		z-index: 2;
		bottom: 60rpx;
		left: 20%;
	}
</style>